<style lang="scss" scoped>
.tab {
  margin: 10px 0;
  .tab-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-content: center;
      h1 {
        font-weight: bold;
        font-size: 20px;
      }
      .left-title {
        display: flex;
        align-items: center;
        li {
          margin: 0 10px;
          background-color: var(--color-background);
          border-radius: 20px;
          padding: 6px 10px;
          color: var(--color-text);
          &.active {
            color: blue;
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="tab" ref="tabRef">
    <div class="tab-title">
      <div class="left">
        <h1>{{ item.title }}</h1>
        <ul class="left-title">
          <li
            @click="activeIndex = i"
            :class="{ active: i === activeIndex }"
            v-for="(v, i) in item.children"
            :key="i"
          >
            {{ v.title }}
          </li>
        </ul>
      </div>
      <div class="right">
        <span>查看更多</span>
        <el-icon><DArrowRight /></el-icon>
      </div>
    </div>
    <div style="margin: 10px 0">
      <swiper-container :slides-per-view="slidesPerView" navigation>
        <swiper-slide v-for="(v, i) in bannerData" :key="i">
          <!-- <img :src="v.url" alt="" width="200" /> -->
          <LazyLoadImage :src="v.url" alt="" width="200" height="304"></LazyLoadImage>
        </swiper-slide>
      </swiper-container>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { TabBannerState } from '@/types'
import { computed, defineProps, onMounted, onUnmounted, ref } from 'vue'
import { throttle } from 'lodash-es'
import LazyLoadImage from '../lazyLoadImage/indexView.vue'
interface PropsType {
  item: TabBannerState
}

const props = defineProps<PropsType>()
// 当前选中的高亮下表
const activeIndex = ref(0)
// 根据当前高亮下表 查找 对应的图片列表
// 依赖关系 下表 => 图片列表
const bannerData = computed(() => {
  return props.item.children[activeIndex.value].images
})
/********* 适配每组显示个数 *************/
const tabRef = ref<HTMLElement>()
const slidesPerView = ref()
const _resize = throttle(() => {
  if (tabRef.value) {
    slidesPerView.value = tabRef.value?.clientWidth / 210
  }
}, 200)

onMounted(() => {
  _resize()

  // 监听视口变化
  window.addEventListener('resize', _resize)
})

onUnmounted(() => {
  // 取消监听视口变化
  window.removeEventListener('resize', _resize)
})
</script>

<script lang="ts">
export default {
  name: 'TabBanner'
}
</script>
